<template>
	<view class="login-lay">
		
		<view class="logo">
			<u-image class="logo-bg" width="100%" height="95rpx" src="@/static/login/logo.png"></u-image>
		</view>
		<view class="Welcome">
			欢迎使用钉校园
		</view>
		<view class="content">
				<view class="phone">
					账户
				</view>
				<u-input 
				border="none"
				class="uni-input" 
				v-model="userLoginVo.phone" 
				type="number" 
				placeholder="请输入手机号码/学号" 
				@input="isdisabled(userLoginVo.phone,userLoginVo.password)"
				/>

			<view class="password">
				密码
			</view>
			<u-input 
			border="none"
			class="uni-input" 
			v-model="userLoginVo.password"  
			placeholder="请输入密码" 
			:password="openPassword"
			@input="isdisabled(userLoginVo.phone,userLoginVo.password)"/>
			<view :class="[!openPassword ? 'psd-eye-active' : 'psd-eye']" @click="changePassword"></view>
		</view>
		<view class="login-bt">
			<button class="login-button" :disabled="isLogin" @click="login()">登录</button>
		</view>
		<view class="forgetpwd" @click="isForget(userLoginVo.phone)">
			忘记密码
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="agreement">
			<u-checkbox-group  @change="checkboxChange()">
				<u-checkbox  v-model="checked" shape="circle"></u-checkbox>
			</u-checkbox-group>
			<view class="agree">
				我已经阅读并同意
			</view>
			<view class="link">
				<u-link  href="https://uviewui.com/" text="服务协议," fontSize="13"></u-link>
				<u-link  href="https://uviewui.com/" text="隐私权政策" fontSize="13"></u-link>
			</view>

		</view>
		<view class="register">
			<button class="register-button" >企业账号</button>
			<button class="register-button" @click="navTo('/pages/login/register')">注册账号</button>
			<button class="register-button" >更多选项</button>
		</view>
	</view>
</template>

<script>
export default{
	options: {styleIsolation: 'shared'},
	data(){
		return{
			checked:false,
			toast:{
				type: 'default',
				title: '默认主题',
				message: "请勾选同意后再进行登录",
			},
			isLogin:true,
			openPassword: true,
			userLoginVo:{
				phone:'',
				password:'',
				validCode:'',
				codeInSession:'',
				validCodeType:'',
				loginType:'1',
			}
		}
	}, 
	methods: {
		navTo(url){
			uni.navigateTo({
				url:url,
			})
		},
		checkboxChange(){
			this.checked = !this.checked;
			// console.log(this.checked);
		},
		isdisabled(phone,password){
			if(phone.length>0&&password.length>0){
				this.isLogin = false;
			}else{
				this.isLogin = true;
			}
		},
		changePassword() {
		     this.openPassword = !this.openPassword;
		},
		isForget(phone){
			if(phone.length>0){
				//路由到其他页面
			}else{
				this.toast.message = '请先输入手机号，再点击忘记密码';
				this.showToast(this.toast);
			}
		},
		showToast(params) {
			this.$refs.uToast.show({
				...params,
			})
		},
		// 登录
		login(){
			if(this.checked == false){
				//判断是否勾选协议
				this.toast.message = '请勾选同意后再进行登录';
				this.showToast(this.toast);
			}else{

				uni.request({
					url:'http://localhost:8090/nailCampus/index/login',
					method:"POST",
					data:this.userLoginVo,
					// 将token跟user存到本地缓存中
					success:(res) =>{
						if(res.data.code === 200){
							console.log(res.data.data);
							uni.setStorageSync("token",res.data.data.token);
							uni.setStorageSync("user",res.data.data.user);
							uni.reLaunch({
								url: '/pages/msg/index'
							});
						}else{
							this.toast.message = res.data.data;
							this.showToast(this.toast);
						}
					}
				})
				
			}
		}
	 }
		
}
	
</script>

<style lang="less" scoped>

	.register{
		margin-top: 400rpx;
		button:after{
			
			padding: 0 0 0 0;
			border: none;
		}
		button{
			// color: white;
			border-radius: 0rpx;
			background-color: white;
		}
	}
	.register-button{
		margin-left: 10rpx;
		line-height: 30px;
		height: 30px;
		border-right: 1px solid #939496;
		width: 200rpx;
		float: left;
	}
	.register-button:active{
		background-color: #fff;
	}
	.agreement{
		display: flex;
		font-size: 27rpx;
		width: 100%;
		.link{
			width: 250rpx;
			display: flex;
			margin-top: 35rpx;
		}
	}
	.agree{ 
		line-height: 100rpx;
		display: flex;
	} 
	.forgetpwd{
		width: 20%;
		margin-top: 20rpx;
		margin-left: 5rpx;
		font-size: 30rpx;
		color: #939496;
	}
	.login-bt{
		margin-left: 5rpx;
		margin-right: 5px;
		margin-top: 40rpx;
		button:after{
			border: none;
		}
		.login-button{
			color: white;
			border-radius: 15rpx;
			background-color: #0080FF;
		}
		button[disabled]{
			color: white;
			background-color: #99CDFF;
		}

	}
	.content{
		margin-top: 60rpx;
		position:relative;
		.psd-eye-active{
			margin-top: 70rpx;
	        width: 60rpx;
	        height: 45rpx;
	        background:url(@/static/login/eye-open.png) no-repeat center center;
	        position: absolute;
	        right: 50rpx;
	        top: 50%;
	        z-index:10;
	    }
		.psd-eye{
			margin-top: 70rpx;
	        width: 60rpx;
	        height: 45rpx;
	        background:url(@/static/login/eye-close.png) no-repeat center center;
	        position: absolute;
	        right: 50rpx;
	        top: 50%;
	        z-index:10;
	    }
		::v-deep.u-input__content, .uni-input{
			margin-top: 10px;
			border-bottom: 1px solid #c8c9cc;
		}
	}
	.password{
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight:bold;
	}

	
	.phone{
		font-size: 30rpx;
		font-weight:bold;
	}
	.Welcome{
		margin-top: 30rpx;
		font-size: 40rpx;
		font-weight:bold;
	}
	.logo{
		border-radius: 15rpx;
		width: 15%;
		height: 10%;
		/* background-color: #0093dc; */
	}
	.login-lay{
		margin-top: 80rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}
</style>